<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            var img = document.getElementsByTagName("img")[0];

            //创建一个数组用于保存图片路径
            var imgArr = ["img/0.jpg", "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg"];

            //创建一个变量保存当前图片索引
            var index = 0;

            //提示文字设置
            var info = document.getElementById("info");
            info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
            //绑定单击事件
            prev.onclick = function () {
                // alert("上一张")
                //切换上一张
                index--;
                if (index < 0) {
                    index = imgArr.length - 1
                }
                img.src = imgArr[index];

                info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
            }

            //下一张
            next.onclick = function () {
                // alert("下一张")
                //切换到下一张
                index++;
                if (index > imgArr.length - 1) {
                    index = 0

                }
                //修改img的src属性
                img.src = imgArr[index];
                info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
            }

        }
    </script>

</head>
<body>

<div id="outer">
    <p id="info"></p>
    <img id="img" src="img/0.jpg" alt="篮球"/>

    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
</body>
</html>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #outer {
        width: 500px;
        margin: 50px auto;
    / / 居中 padding: 10 px;
        background-color: greenyellow;
        text-align: center;
    / / 设置文本居中，将按钮居中 border-radius: 30 px;
    }

    #img {
        width: 500px;
        height: 450px;
        object-fit: cover;
        border-radius: 50%; /* 圆形图片 */
    }

</style>
